<template>
  <div style="display: flex;flex-direction: row;height: 100%" v-if="!refreshing">
    <div style="display: flex;flex-direction: column">
      <dv-border-box-8 style="height: 30px;padding: 10px;width: 300px;margin-top: 10px;margin-left: 10px">
        <div style="color: white;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;cursor: pointer" @click="downlodTemplate">数据上传</div>
      </dv-border-box-8>
      <dv-border-box-13 backgroundColor="#19233Ddf" style="width: 300px;height:730px;padding: 20px;">
        <div class="bg-color-black" >
          <div class="d-flex jc-center body-box">
            <div style="max-height: 730px;overflow-y: auto">
              <dv-border-box-12 style="height: 40px;overflow-y: hidden" v-for="(item,index) in defs" :key="index" :backgroundColor="item.code==selectItem.code?'#FFA500df':'#19233Ddf'">
                <div style="display: flex;flex-direction: row;padding-top: 10px;cursor: pointer" @click="selectItemClick(item)">
                  <div style="color: white;width: 180px;margin-left: 40px">
                    {{item.num}}.{{item.name}}
                  </div>
                  <div style="color: white;width: 100px;margin-left: 20px">
                    {{item.code}}
                  </div>
                </div>

              </dv-border-box-12>
            </div>
          </div>
        </div>
      </dv-border-box-13>

    </div>
    <dv-border-box-11 :title="selectItem.name" style="height: 750px;padding-top: 60px;padding-left: 50px">
      <el-table
        :data="selectData"
        style="width: 96%;height: 650px"
        max-height="650px"
        :stripe="true">
        <el-table-column
          v-for="(item,index) in selectItem.def"
          :key="index"
          :prop="item.Heading"
          :show-overflow-tooltip="true"
          :label="item.name"
          v-if="item.Heading!='FILE_FSET'">
        </el-table-column>
        <el-table-column
          v-for="(item,index) in selectItem.def"
          :key="index"
          :prop="item.Heading"
          :show-overflow-tooltip="true"
          label="几何"
          v-if="item.Heading=='FILE_FSET'">
          <template slot-scope="scope">
            <i class="el-icon-s-order" style="color: white;font-size: 18px;cursor: pointer" v-if="scope.row.FILE_FSET" @click="fileClick(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </dv-border-box-11>
    <el-dialog title="几何数据" :visible.sync="detailShow" v-if="detailShow" :modal="false" width="90%">
      <div style="display: flex;flex-direction: row;height: 600px;width: 100%;background: black">
        <pre v-highlightjs="xml_show" style="max-height: 600px;overflow-y: auto;">
          <code class="highlight_s"> </code>
        </pre>
          <div id="mapContainer" style="width:100%;height:500px" v-if="mapShow">
            <div id="map"></div>
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
let baseUrl = ''
import vkbeautify from 'vkbeautify'

import x2js from "x2js"
let x2jsObj=new x2js();

import $L from "leaflet";
import "leaflet/dist/leaflet.css";
// delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png")
});
// 解决默认 maker 无法显示的问题
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
L.Marker.prototype.options.icon = DefaultIcon;

export default {
  props:["prj"],
  data(){
    return {
      defs:[],
      refreshing:true,
      selectItem:null,
      selectData:null,
      selectRow:null,
      selectFile:null,
      detailShow:false,
      xml_show:null,
      mapShow:false,
    }
  },
  created () {
    this.initData();
  },
  mounted () {
  },
  methods:{
    selectItemClick(item){
      console.log(item);
      this.selectItem=item;
      this.selectData=null;
      axios.get(`/api/prj/data?code=${this.prj}&objCode=${item.code}`)
        .then(
          res => {
            console.log(res)
            this.selectData = res.data
          })
    },
    getName(item){
      //xx.xxxxxxxxxxx[xxx]   2+1+10+2+4
      let num = item.num;
      if (parseInt(num)<10) num = "0"+num;

      let name  =item.name;
      for (let i=0;i<10-name.length;i++){
        name+="---";
      }
      console.log(`${num}.${name}[${item.code}]`)
      return `${num}.${name}[${item.code}]`;
    },
    initData(){
      axios.get(baseUrl + '/api/prj/def?code=' + this.prj)
        .then(
          res => {
            this.defs = res.data

            if ((this.defs)&&(this.defs.length>0)){
              this.selectItemClick(this.defs[0])
            }
            console.log(this.defs)
            this.refreshing = false
          }
        )
    },
    downlodTemplate(){
      console.log("下载模板")
    },
    fileClick(item){
      this.selectRow = item;
      this.mapShow = false;
      console.log("file",item);
      axios.get(`static/data/${this.prj}/${item.FILE_FSET}`)
      .then(
        res=>{
          this.selectFile=res.data;
          console.log(res.data);
          this.xml_show=vkbeautify.xml(this.selectFile)
          console.log(this.xml_show);

          console.log(x2jsObj.xml2js(this.xml_show));

          let obj = x2jsObj.xml2js(this.xml_show)

          this.detailShow = true;
          if (obj.LineString){
            this.drawFile(obj.LineString.coordinates.__text)
          }
        }
      )
    },
    drawFile(data){


      let result = [];
      data = data.replace(/\r\n/g,"@")
      data = data.replace(/\n/g,"@");
      let list=data.split("@");
      list.forEach(one=>{
        if (one.length>0){
          let sp=  one.trim().split(" ");
          if (sp.length==2){
            // result.push({x:parseFloat(sp[0]),y:parseFloat(sp[1])});
            result.push([sp[0] / 100,sp[1] / 100]);
          }
        }
      })
      console.log(result);
      this.mapShow = true;
      this.$nextTick(()=>{
        var map = L.map('map').setView([0,0], 12);

        var cood=[
          [26.4,99.2],
          [26.4,99.2045],
          [26.40045,99.2045],
          [26.40045,99.20525],
          [26.40295,99.20525],
          [26.40295,99.20475],
          [26.404,99.20475],
          [26.405,99.204],
          [26.405,99.2],
          [26.405,99.196],
          [26.404,99.1955],
          [26.4028,99.1955],
          [26.4028,99.195],
          [26.4003,99.195],
          [26.4003,99.19575],
          [26.4,99.19575],
          [26.4,99.2],
        ];

        L.polyline(result,{
          color: 'red',
          weight: 3,
          dashArray: '9',
          lineCap: 'square'
        }).addTo(map);
      })
    }
  }

}
</script>
<style>
.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
